<template>
  <view class="page">
    <Header :title="'抗遗忘复习'"></Header>
    <view class="main_container">
      <view class="main_content">
        <view class="content">
          <view class="tabs">
            <reviewTabs :current="0"></reviewTabs>
          </view>
          <view class="box">
            <view class="section">
              <view class="title">
                <text> 打卡单词</text>
              </view>
              <view class="num">
                <view>{{ currentWordIndex + 1 }}</view>
                <text>/{{ wordList.length }}</text>
              </view>
              <view class="list">
                <view class="list_title">
                  <view>今日打卡</view>
                </view>
                <view class="list_content">
                  <PronunciationTest
                    v-if="wordData"
                    :wordData="wordData"
                    @next="nextWord"
                    @save="saveWordRecord"
                    :key="componentKey"
                  ></PronunciationTest>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-count-down
      class="countdown"
      ref="uCountDown"
      :timestamp="timestamp"
    ></u-count-down>
    <u-popup
      class="custom-popup"
      v-model="completeShow"
      :zoom="false"
      mode="center"
      width="100%"
      height="100%"
      :mask-close-able="false"
      :mask-custom-style="{
        background: 'rgba(0, 0, 0, 0.5)',
      }"
    >
      <view class="tips">
        <view class="tips_content">
          <view class="tips_text"> 恭喜你完成了发音测试！ </view>
          <view class="tips_btn" @click="back()">
            <text>返回</text>
          </view>
          <view class="tips_img">
            <image src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/word/xiaolian.png" mode="scaleToFill" />
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { getWords, saveWordLearningRecord, kyw21dk } from "@/api/sync";
import reviewTabs from "./reviewTabs";

export default {
  components: { reviewTabs },
  data() {
    return {
      chapterId: "",
      fxId: "",
      wordList: [],
      currentWordIndex: 0,
      wordData: null,
      componentKey: 0,
      completeShow: false,
      timestamp: 86400,
    };
  },
  onLoad(options) {
    this.chapterId = options.chapterId;
    this.fxId = options.fxId;
    this.getData();
  },
  methods: {
    getData() {
      getWords("kyw21", this.chapterId).then((res) => {
        this.wordList = res.data;
        this.getWordInfo();
      });
    },
    getWordInfo() {
      this.wordData = this.wordList[this.currentWordIndex];
    },
    nextWord() {
      if (this.currentWordIndex === this.wordList.length - 1) {
        this.completeShow = true;
        this.completeRecord();
        return;
      } else {
        this.currentWordIndex++;
      }
      this.getWordInfo();
      this.componentKey++;
    },
    saveWordRecord(score, isPass) {
      let params = {
        score: score,
        pass: isPass ? 1 : 0,
        step: "2",
        type: "kyw21",
        wordId: this.wordData.id,
        batch: this.fxId,
      };
      saveWordLearningRecord(params);
    },
    completeRecord() {
      let params = {
        errIds: "",
        wrongCount: 0,
        fxCount: this.wordList.length,
        fxId: this.fxId,
        step: "2",
        timeDur: this.timestamp - this.$refs.uCountDown.seconds,
      };
      kyw21dk(params);
    },
    back() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./review1Pronunciation";
</style>
